/*
 * 产品属性页面视图
 * @Author: ljb 
 * @Date: 2018-03-27 17:52:07 
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-01 14:25:50
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-product-attribute-views {
        padding: 20px;
    }

</style>

 <template>

    <div class="v-admin-product-attribute-views">

        <Tabs type="card" @on-click="changeTab">

            <TabPane label="新增" name="新增">
                
                <attribute-create   ref="create"
                                    :product-models="product_models"
                                    @post="postData">
                </attribute-create>

            </TabPane>

            <TabPane label="查看" name="查看">

                <!-- 搜索组件 -->
                <!-- <search-form  @search="confirmSearch" :product-types="product_models"></search-form> -->
                
                <attribute-index    :loading="table_loading"
                                    :attributes="attributes.data"
                                    @edit="attributeDetail"
                                    @delete="deleteAttribute"
                                    @sort="confirmSearch">                      
                </attribute-index>

                <br>

                <!-- 分页组件 -->
                <Row type="flex" justify="center">
                    <Page   @on-change="pageChange" 
                            @on-page-size-change="perPageChange"
                            placement="top"
                            :total="attributes.total" 
                            :current="attributes.current_page"
                            :page-size="query_info.per_page"
                            show-sizer show-total></Page>
                </Row>

            </TabPane>
        </Tabs>

        <Modal  title="修改产品属性"
                v-model="show_modal">

            <!-- 产品属性编辑组件 -->
            <attribute-edit :product-models="product_models"
                            :attribute-detail="attribute_detail"
                            @update="updateAttribute"></attribute-edit>

            <div slot="footer"></div>

        </Modal>

    </div>

 </template>
 
 <script>

import API_LIST from 'src/API_LIST';

import { mapGetters , mapMutations } from "vuex";

import qs from 'qs';

import attributeCreate from './create';
import attributeIndex from './index';
import attributeEdit from './edit';
// import searchForm from './search-form';

 export default {

    name: 'product-attribute-views',

    components : {

        attributeCreate,

        attributeIndex,

        attributeEdit,

        // searchForm

    },
    data: function() {	

         return {

            query_info : {

                page : 1,

                per_page : 20

            },
            
            search_info : {

                page : 1
                
            },                      //分页信息

            table_loading : false,      //表格更新时的loading

            show_modal : false,         //弹框的控制

            attribute_detail : {},        //产品属性详情

            attributes : {},     //产品属性列表

            product_models: [],  // 产品属性种类

        }
    },
    mounted () {
        this.fetchProductModel();
    },
    methods: {

        ...mapMutations('spinShow',[
            'showSpin',
            'closeSpin'
        ]),

        /**
         * 切换tab
         * @param  {string} tab_name {tab的name}
         * @return {undefined} 
         */
        changeTab(tab_name) {
            
            if( tab_name === '查看' ) {

                this.fetchProductAttributeList(this.query_info);

            }else {

                this.attributes.data = [];

            }

        },

        /**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined} 
         */
        pageChange(pageNumber) {

            this.search_info.page = pageNumber;

            this.search_info.per_page = this.query_info.per_page;

            this.fetchProductAttributeList(this.search_info);
        },

        /**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
        perPageChange(per_page) {

            this.search_info.per_page = per_page;

            this.query_info.per_page = per_page;

            this.fetchProductAttributeList(this.search_info);

        },
        
        /**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
        confirmSearch({ name }) {

            this.query_info.name = name || '';

            this.search_info = JSON.parse(JSON.stringify(this.query_info));

            this.fetchProductAttributeList(this.query_info);

        },

        /**
         * 新增产品属性的post数据
         * @return {undefined}
         */
        postData(param){

            this.showSpin('请稍候');

            this.$http.post( API_LIST.PRODUCT_ATTR , param )
                    .then(({ data })=>{
                                
                        if( parseInt(data.code) !== 0 )throw new Error(data.error);

                        this.$Message.success('新增成功！');

                        this.$refs.create.handleReset('formValidate');
                                
                    })
                    .catch((err)=>{

                        this.$Message.error(err.message);
                
                    })
                    .then(this.closeSpin)

        },

        /**
         * 查看产品属性详情
         * @param  {string} id {合作伙伴的id}
         * @return {undefined}
         */
        attributeDetail(attribute){

            this.attribute_detail = attribute;

            this.show_modal = true;

        },

        /**
         * 更新产品属性信息
         * @param  {Object} param {需要更新的参数对象}
         * @return {undefined}
         */
        updateAttribute(id,param){

            this.showSpin();

            this.$http.post( API_LIST.PRODUCT_ATTR + '/' + id, param )
                .then(({ data })=>{
                            
                    if  ( parseInt(data.code) !== 0 )throw new Error(data.error);

                    this.$Message.success('更新成功！');

                    this.show_modal = false;

                    this.fetchProductAttributeList(this.search_info);
                            
                })
                .catch((err)=>{

                    this.$Message.error(err.message || err.statusText);
            
                })
                .then(this.closeSpin)

        },

        /**
         * 删除产品属性
         * @param  {string} id {需要删除的产品属性的id}
         * @return {undefined}
         */
        deleteAttribute(id){

            this.$Modal.confirm({
                title: '确定删除此产品属性么？',
                onOk: () => {

                    const param = {
                        _method : 'DELETE'
                    }

                    this.table_loading = true;

                    this.$http.post( API_LIST.PRODUCT_ATTR + '/' + id , param )
                            .then(({ data })=>{
                                        
                                if( parseInt(data.code) !== 0 )throw new Error(data.error);

                                this.fetchProductAttributeList(this.search_info);

                                this.$Message.success('删除成功');
                                        
                            })
                            .catch((err)=>{

                                this.$Message.error(err.message || err.statusText);

                            })
                            .then(() => this.table_loading = false)

                },
                onCancel: () => {}
            });

        },

        /**
         * 获取产品模型
         * @return {undefined}
         */
        fetchProductModel() {

            this.showSpin('请稍候');

            this.$http.get( API_LIST.PRODUCT_ATTR + '/create')
                    .then(({ data })=>{

                        if( parseInt(data.code) !== 0 )throw new Error(data.error);

                        this.product_models = data.product_models;

                    })
                    .catch((err)=>{

                        this.$Message.error(err.message || err.statusText);

                    })
                    .then(this.closeSpin)
        },

        /**
         * 获取产品属性列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
        fetchProductAttributeList(param){

            this.table_loading = true;

            let query_str = qs.stringify(param);

            this.$http.get( API_LIST.PRODUCT_ATTR + '?' + query_str )
                    .then(({ data })=>{
                                
                        if( parseInt(data.code) !== 0 )throw new Error(data.error);
                        
                        this.attributes = data.attributes;
                                            
                    })
                    .catch((err)=>{
                
                        this.$Message.error( err.message || err.statusText );

                    })
                    .then(() => this.table_loading = false)

        }
     }
 }
 </script>
